<template>
  <div class="BlogDetail-container">
    <h1>{{ blog.title }}</h1>
    <div class="aside">
      <span>日期: {{ blog.createDate }}</span>
      <span>浏览: {{ blog.scanNumber }}</span>
      <a href="#data-form-container">评论: {{blog.commentNumber}}</a>
      <RouterLink :to="{
        name:'CategoryBlog',
        params:{
          categoryId:blog.category.id
        }
      }">分类：{{blog.category.id}}</RouterLink>
    </div>
    <div v-html="blog.htmlContent" class="markdown-body">

    </div>
  </div>
</template>

<script>
import "highlight.js/styles/github.css";
import "@/styles/markdown.css";
export default {
  props: {
    blog: {
      type: Object,
      required: true,
    },
  }
};
</script>

<style lang="less" scoped>
.BlogDetail-container{
  padding-left: 1.5em;
  padding-right: 1em;
  .aside{
    font-size:12px;
    color:#a7a7a7;
    span,a{
      margin-right:8px
    }
  }
}
</style>

